import React, {Component} from 'react';
import commonConfig from "../../static/js/commonConfig";
import HeadComponent from "../common/headComponent";
import ContentComponent from "../common/contentComponent";
import FileViewer from "react-file-viewer";

class WordViewerApp extends Component {
    state = {
        name: '',
        url: '',
        suffix: 'docx'
    }

    componentWillMount() {
        let {bucketName, fileUrl, name} = commonConfig.getUrlParams(this);
        let suffix = name.substring(name.lastIndexOf('.') + 1);
        name = name.substring(0, name.lastIndexOf('.'));
        this.setState({name, suffix, url: commonConfig.downloadFile({bucketName, fileUrl})});
    }

    render() {
        const {url, name, suffix} = this.state;
        const fileProps = {
            filePath: url,
            fileType: suffix
        }
        return (
            <>
                <div className="pdf_viewer_module text_viewer_module">
                    <HeadComponent noNav={true} {...this.props}>
                        <div className="viewer_head float-left">
                            <h3>在线文件预览</h3>
                        </div>
                    </HeadComponent>
                    <div className="main_container animate__animated animate__fadeIn">
                        <ContentComponent copyrightStyle={{position: 'static'}}>
                            <div>
                                <h4>{name}</h4>
                                <div className="word_content">
                                    <FileViewer {...fileProps}/>
                                </div>
                            </div>
                        </ContentComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default WordViewerApp